<!doctype html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="initial-scale=1,minimum-scale=1, maximum-scale=1, user-scalable=no">
	<meta name="apple-mobile-web-app-status-bar-style" content="blank" />
	<title>图片展示网站</title>
	<link rel="stylesheet" href="masonry.css">
	<link rel="stylesheet" href="verticalShowcase.css">
	<link rel="stylesheet" href="imageBox.css">
	<link rel="stylesheet" href="bookReview.css">
	<link rel="stylesheet" href="page.css">
	<link rel="stylesheet" href="style.css">
	<style>
		.banner{height: 380px;}
		/*ipad:1024x768 横向*/
		@media (max-width: 1024px) and (orientation: landscape) {
			.banner{height: 320px}
		} 
		/*ipad:1024x768 竖向*/
		@media (max-width: 768px) and (orientation: portrait) {   
			.banner{height: 300px}
			.banner .img{width: 960px;height: auto;top: 0;}
			#masonry .photoContainer .photoList{list-style: none;margin: 0;padding-left: 0;padding:20px;}
			#masonry .photoContainer .photoList li{display:inline;margin-bottom: 20px;width: 150px;}
		} 
		/*普通手机 320x480*/
		@media (max-width: 320px) {
			.banner{height: 260px}
		}
		
		/*850*/
		@media (max-width: 850px) {
			.banner{height: 320px}
			.banner .img{width: 1200px;height: auto;top: -200px;left: -200px;}
		}

		/*768*/
		@media (max-width: 768px) {
			.banner{height: 300px}
			.banner .img{width: 960px;height: auto;top: 0;}
			#masonry .photoContainer .photoList{list-style: none;margin: 0;padding-left: 0;padding:20px;}
			#masonry .photoContainer .photoList li{display:inline;margin-bottom: 20px;width: 163px;}
		}

		/*iphone 640x960*/
		@media (max-width: 640px) {
			.banner{height: 280px}
			header {height: 30px;}
			header .mainlogo{display: none;}
			header .logo2{display: block;height: 20px;width: 31px;top: 5px;left: 50%;-webkit-transform:translateX(-50%);position: absolute;}
			.banner .img{width: 840px;height: auto;top: -150px;left: -200px;}
			.navigator{display: none;}
			.navigatorImg{display: block;}
			#masonry .photoContainer .photoList{list-style: none;margin: 0;padding-left: 0;padding:10px;}
			#masonry .photoContainer .photoList li{display:inline;margin-bottom: 20px;width: 188px;}
		}

	</style>
	<script src="modernizr.custom.js"></script>
</head>
<body>
	<header>
		<a href="index.html" class="mainlogo">
			<img src="logo.png" alt="">
		</a>
		<nav class="navigator">
			<ul>
				<li><a href="index.html">首页</a></li>
				<li><a href="equalHeight.html">布局1</a></li>
				<li><a href="masonry.html">布局2</a></li>
				<li><a href="imageBox.html">布局3</a></li>
				<li><a href="verticalShowcase.html">布局4</a></li>
				<li><a href="bookReview.html">布局5</a></li>
			</ul>
		</nav>
		<a href="index.html" class="logo2">
			<img src="logo2.png" alt="">
		</a>
		<div class="navigatorImg">
			<a href="javascript:void(0);" class="logo">
				<img src="icon-hamburger.png" alt="">
			</a>
			<ul class="navigatorList hide">
				<li><a href="index.html">首页</a></li>
				<li><a href="equalHeight.html">布局1</a></li>
				<li><a href="masonry.html">布局2</a></li>
				<li><a href="imageBox.html">布局3</a></li>
				<li><a href="verticalShowcase.html">布局4</a></li>
				<li><a href="bookReview.html">布局5</a></li>
			</ul>
		</div>
	</header>

	<article class="banner">
		<ul class="opt">
			<li><a href="javascript:void(0);" class="dot active" data-index="0"></a></li>
			<li><a href="javascript:void(0);" class="dot" data-index="1"></a></li>
			<li><a href="javascript:void(0);" class="dot" data-index="2"></a></li>
			<li><a href="javascript:void(0);" class="dot" data-index="3"></a></li>
			<li><a href="javascript:void(0);" class="dot" data-index="4"></a></li>
		</ul>
		<a class="banner-link" href="equalHeight.html"><img src="b1.jpg" alt="" class="img"><p class="txt">个人作品集</p></a>
		<a class="banner-link hide" href="masonry.html"><img src="b2.jpg" alt="" class="img"><p class="txt">食谱</p></a>
		<a class="banner-link hide" href="imageBox.html"><img src="b3.jpg" alt="" class="img"><p class="txt">摄影画册</p></a>
		<a class="banner-link hide" href="verticalShowcase.html"><img src="b4.jpg" alt="" class="img"><p class="txt">家具展示</p></a>
		<a class="banner-link hide" href="bookReview.html"><img src="b5.jpg" alt="" class="img"><p class="txt">电子书店</p></a>
	</article>

	<article class="container">
		<div class="tips">
			<div class="box">
				<div class="left">
					<img src="icon1.png" alt="" class="icon">
				</div>
				<div class="right">
					<h1>标题一</h1>
					<p>说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明</p>
				</div>
			</div>
			<div class="box">
				<div class="left">
					<img src="icon2.png" alt="" class="icon">
				</div>
				<div class="right">
					<h1>标题一</h1>
					<p>说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明</p>
				</div>
			</div>
			<div class="box">
				<div class="left">
					<img src="icon3.png" alt="" class="icon">
				</div>
				<div class="right">
					<h1>标题一</h1>
					<p>说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明</p>
				</div>
			</div>
			<div class="box">
				<div class="left">
					<img src="icon4.png" alt="" class="icon">
				</div>
				<div class="right">
					<h1>标题一</h1>
					<p>说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明</p>
				</div>
			</div>
			<div class="box">
				<div class="left">
					<img src="icon5.png" alt="" class="icon">
				</div>
				<div class="right">
					<h1>标题一</h1>
					<p>说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明</p>
				</div>
			</div>
		</div>
		<div class="layoutBanner">
			<div class="layout">
				<a href="equalHeight.html"><img src="layout1.png" alt=""></a>
			</div>
			<div class="layout">
				<a href="masonry.html"><img src="layout2.png" alt=""></a>
			</div>
			<div class="layout">
				<a href="verticalShowcase.html"><img src="layout3.png" alt=""></a>
			</div>
			<div class="layout">
				<a href="imageBox.html"><img src="layout4.png" alt=""></a>
			</div>
			<div class="layout">
				<a href="bookReview.html"><img src="layout5.png" alt=""></a>
			</div>
		</div>
	</article>

	<footer>
		<p>基于HTML5的图片浏览器设计与实现／陈伟健</p>
	</footer>
	<script src="jquery-1.11.0.min.js"></script>
	<!-- <script src="bookblock.min.js"></script> -->
	<!-- <script src="classie.js"></script> -->
	<!-- <script src="bookshelf.js"></script> -->
	<!-- <script src="jquery.masonry.js"></script> -->
	<!-- <script src="jquery.kinetic.js"></script> -->
	<!-- <script src="slider.js"></script> -->
	<script src="base.js"></script>
	<!-- <script src="photo.js"></script> -->
	<script>
		// 全局
		var nowBannerIndex = 0; //当前轮播图片序号
		var bannerDirector = 1; //轮播的方向

		// banner轮播
		$('.banner .opt .dot').click(function() {
			var index = parseInt($(this).attr('data-index'));
			$(this).addClass('active');
			$(this).parent('li').siblings('li').find('.dot').removeClass('active');
			var imgs = $('.banner .banner-link');
			for (var i = 0; i < imgs.length; i++) {
				if (i === index) {
					imgs[i].classList.remove('hide');
					nowBannerIndex = index;
				} else {
					imgs[i].classList.add("hide");
				}
			}
		});
		// 自动播放
		function autoBanner() {
			if (nowBannerIndex === 4) {
				bannerDirector = -1;
			} else if (nowBannerIndex === 0) {
				bannerDirector = 1;
			}
			nowBannerIndex += bannerDirector;
			$('.banner .opt .dot')[nowBannerIndex].click();
		}
		var autoBannerInterval = setInterval(function() {
			autoBanner()
		}, 5000);
	</script>
</body>
</html>